<template>
  <!-- 我的订单 -->
  <div class="Principal">
<header>
      <div class="return" @click="returns">
        <i class="iconfont icon-zuojiantou"></i>
      </div>
      <div class="title">我的订单</div>
    </header>
    <main>
      <div class="contents">
        <div>
          <van-grid>
            <van-icon
              class="iconfont icon-dianshangjiashangcheng"
              color="#ff5654"
            >
            </van-icon>
          </van-grid>
        </div>
        <div>
          <p>房租</p>
          <p>查看 租房等订单</p>
        </div>
      </div>
      <div class="contents" @click="skipOrder">
        <div>
          <van-grid>
            <van-icon class="iconfont icon-shenghuofuwu" color="#ff5654">
            </van-icon>
          </van-grid>
        </div>
        <div>
          <p>商城</p>
          <p>查看 家具，家电，等订单</p>
        </div>
      </div>

      <div class="contents">
        <div>
          <van-grid>
            <van-icon class="iconfont icon-shenghuofuwu1" color="#ff5654">
            </van-icon>
          </van-grid>
        </div>
        <div>
          <p>生活服务</p>
          <p>查看 保洁，维修，等订单</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
     methods:{
  //跳转
     returns(){
         this.$router.push('/my')
     },
     skipOrder(){
       this.$router.push({path: "/mall_orders"})
     }
  }
};
</script>

<style lang="less" scoped>
.Principal {
    background-color: #ededed;
    height: 1334px;
    header {
    width: 100%;
    height: 88px;
    background-color: #ff5654;
    display: flex;
    .return {
      margin-left: 20px;
      i {
        color: #fff;
        font-size: 34px;
        line-height: 88px;
      }
    }
    .title {
      padding: 0 250px;
      color: #fff;
      font-size: 36px;
      line-height: 88px;
    }
  }
  main {
    padding: 20px;
  
    .contents {
      border-radius: 8px;
      margin-bottom: 20px;
      background-color: #fff;
      display: flex;

      .icon-dianshangjiashangcheng,
      .van-icon-undefined {
        font-size: 80px;
        margin: 40px 20px 40px 40px;
      }
      .icon-dianshangjiashangcheng {
        font-size: 90px;
      }
      p:nth-child(1) {
        margin: 0;
        margin-top: 46px;
        font-size: 30px;
        opacity: 0.8;
      }
      p:nth-child(2) {
        font-size: 26px;
        opacity: 0.8;
        margin: 0;
      }
    }
  }
}
</style>
